<template>
  <h2>toRefs的使用</h2>
  <!-- <h3>name:{{state.name}}</h3>
  <h3>age:{{state.age}}</h3> -->

  <h3>name:{{name}}</h3>
  <h3>age:{{age}}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
  name: 'App',
  setup(){
    const state=reactive({
      name:'kangroo',
      age:47,
    })
    // toRefs把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
    const state2=toRefs(state)
    // 定时器，更新数据，如果数据变化随之界面变化，证明是响应式数据
    setInterval(()=>{
      // state.name+='=='
      // state2.name.value+='==='
    },2000)
    return{
      // state,
      // ...state  //不是响应式数据
      ...state2  //里面每个属性都是ref
    }
  }
});
</script>